html{
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility:hidden;
  -webkit-overflow-scrolling : touch;  //IOS scroll touch

}
body{
  position: fixed;
}
input,
textarea,button{
  border: 0;
  -webkit-appearance: none;
}
$blue:#1f4ba5;
$lightBlue:#41598f;
$wordColor:#232323;
$white:#fff;
$red:#fe4f20;
$gray:#e4e4e4;
$darkGray:#b2b2b2;
$black:#434343;
$red2:#fc512d;
$lightGray:#f8f8f8;
table{
  width:100%;
}
@mixin keyframes($animationName){
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}
@mixin flex($jc,$al){
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: $jc;
  -moz-justify-content: $jc;
  -webkit-justify-content: $jc;
  justify-content: $jc;
  -webkit-box-align: $al;
  -moz-align-items: $al;
  -webkit-align-items: $al;
  align-items: $al;
}
*{
  font-family: Verdana;
  color:$wordColor;
}
.btn{
  width: 100%;
  height: 1.8rem;
  color: $white;
  font-size: 0.6rem;
  border: none;
  border-radius: 30px;
  outline: none;
}
.border-blue{
  border:2px solid $blue;
}
.border-gray{
  border:2px solid #e0e0e0!important;
}
.bg-blue{
  background-color:$blue;
}
.btn-blue{
  @extend .bg-blue;
}
.btn-lightblue{
  background-color: $lightBlue;
}
.btn-ghost-blue{
  background-color: $white;
  border:2px solid $blue;
  color:$blue;
}
.input{
  width:100%;
  border-radius: 5px;
  @extend .border-gray;
  height: 1.8rem;
  line-height: 1.8rem;
  padding-left:10px;
  box-sizing: border-box;
  outline:none;
  &:focus{
    @extend .border-blue;
  }
}
a{
  &:active{
    text-decoration: underline;
  }
}


//******************  login   ******************
.main{
  width: 80%;
  position: absolute;
  left: 50%;
  margin-left: -40%;
  top: 5%;
}
.logo{
  width: 1.7rem;
  height: 1.6rem;
  display: block;
  margin:0 auto 2rem;
}
.title{
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 25px;
}
.input{
  margin-bottom:15px;
}
.n{
  margin: 20px 0;
  font-size: 0.6rem;

  input[type=checkbox]{
    width:18px;
    height:18px;
    border:2px solid $lightBlue;
    border-radius: 3px;
    vertical-align: middle;
    outline:none;
    margin-right:5px;
  }

  label{
    line-height: 18px;
    font-size: 18px;
    font-size: 0.6rem;
  }

  input[type=checkbox]:checked{
    //@extend .border-blue;
    background-color: $lightBlue;
  }

  a{
    float: right;
  }

}
.sign-up{
  display: block;
  text-align: center;
  font-size: 0.6rem;
  margin: 1rem 0 2rem;
}
button{
  display: block;
}
.mask{
  position:relative;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.6);
  display: none;
  //animation:fade 1s ease;
}
.sign-up-mask,
.fogot-pwd-mask{
  background-color: $white;
  width: 88%;
  position: relative;
  left: 50%;
  margin-left: -44%;
  top: 15%;
  border-radius: 8px;
  padding: 5%;
  box-sizing: border-box;
  display: none;
  animation:fade .8s ease;
}
@include keyframes (fade) {
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
.fogot-pwd-mask{
  top:27%;
}
.icon-close{
  position: absolute;
  top: 10px;
  right: 11px;
  background: url("../img/close.png") no-repeat;
  display: block;
  width: .7rem;
  height: .7rem;
  background-size: 100% 100%;

}
.tip{
  text-align: center;
  font-size: .1rem;
  p{color:#ccc;font-size: .5rem;}
  code{color:#ccc;font-size: .5rem;}
  a{color:$blue;font-size: .5rem;}
}
//******************  login   ******************


//******************  index   ******************

.index-header{
  height:2.2rem;
  width:100%;
  background-color: $white;
 @include flex(space-between,center);
  position: absolute;
  top:0;
  left:0;
}
.index-header .logo{
  margin:0 auto;
}
.icon-menu{
  display: block;
  width:1rem;
  height:1rem;
  background:url(../img/menu.png) no-repeat;
  background-size:100% 100%;
  margin: 0 auto;
}
.icon-bag{
  display: block;
  width: 1rem;
  height: 1.3rem;
  background:url(../img/bag.png) no-repeat;
  background-size:100% 100%;
  margin: 0 auto;
}
.icon-zoom{
  display: block;
  width: 1rem;
  height: 1rem;
  background:url(../img/zoom.png) no-repeat;
  background-size:100% 100%;
  margin: 0 auto;
}
.index-header div:nth-child(1){
  margin-left: 15px;
}
.index-header div:nth-child(2){
  position: absolute;
  top:50%;
  margin-top:-0.8rem;
  left:50%;
  margin-left:-0.85rem;
}
.head-title{
  color:$black;
  font-size: .8rem;
  margin-top:-4px;
  margin-bottom:2px;
  line-height: normal;
  text-align: center;
}
.head-info{
  font-size:.5rem;
  color:$darkGray;
  line-height: normal;
  text-align: center;
  span{
    color:$darkGray;
  }
}
.other-icon{
  @include flex(null,center);
}
.other-icon p:nth-child(1){
  position:relative;
}
.con{
  position:relative;
  top:2.2rem;
  height:calc(100% - 2.2rem);
  overflow-y:scroll;
  overflow-x:hidden;
  box-sizing: border-box;
}
.bag-num{
  position: absolute;
  display: block;
  width: .8rem;
  height: .8rem;
  background-color: $red;
  border-radius: 50%;
  font-size: .4rem;
  text-align: center;
  line-height: .8rem;
  color: $white;
  top: 0;
  right: -.3rem;
}
.other-icon p:nth-child(2){
  margin: 0 15px;
}
.banner{
  width:100%;
  height: 19rem;
}
.banner img{
  width:100%;
  height:100%;
}
.swiper-pagination-bullet {
  width: .3rem;
  height: .3rem;
  display: inline-block;
  border-radius: 100%;
  background: $white;
  opacity: .3;
}
.swiper-pagination-bullet-active {
  width: .5rem;
  height: .5rem;
 }
.goods-area{
  background-color: $white;
  width:100%;
}
.goods-area .title{
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  position: relative;
  margin: 0;
  font-size: .7rem;
  font-weight: bold;
  a{
    position: absolute;
    font-size: .4rem;
    font-weight: normal;
    color: $blue;
    right: 10px;
  }
}
.goods-sorts{
  li{
    float:left;
    border-top:1px solid $gray;
    box-sizing: border-box;
    width:50%;
    text-align: center;
    img{
      height: 5rem;
      display: block;
      margin:10px auto;
    }
    .sort-name{
      color:$wordColor;
    }
    .sort-num{
      color: $darkGray;
    }
  }
  li:nth-child(odd){
    border-right:1px solid $gray;
  }
}
.top-search{
  display: none;
  padding:0 15px;
  margin-top:10px;
}
.wrapper1{
  display: none;
  background-color:$white;
  width:10rem;
  float: left;
  height: 100%;
  .sorts-list{
    font-size: 1rem;
    margin-left: 35px;
    li{
      margin-bottom:20px;
      font-size: .8rem;
      &:active{
        color:$blue;
        text-decoration: underline;
      }
    }
  }
}
.wrapper2{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.show{
  position:absolute;
  top:2.3rem;
  left:10rem;
  animation: show .4s ease;
}
.hide{
  position:relative;
  top:0;
  left:0;
  animation:hide .4s ease;
}
@include keyframes(show){
  0%{
    top:0;
    left:0;
  }
  100%{
    position:absolute;
    top:2.3rem;
    left:10rem;
  }
}
@include keyframes(hide){
  0%{
    position:absolute;
    top:2.3rem;
    left:10rem;
  }
  100%{
    position:relative;
    top:0;
    left:0;
  }
}
.wrapper-icons{
  margin-top: 2rem;
  li{
    float:left;
    width:33.3%;
    div{
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      border: 1px solid #e4e4e4;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position:relative;
    }
  }
  .person{
    width:1rem;
    height:1rem;
  }
  .shopping-bag{
    width: 0.9rem;
    height: 1.1rem;
  }
  .exit{
    width: 1rem;
    height: 0.9rem;
  }
}
//******************  index   ******************



//******************  products list   ******************

.section-top{
  position: relative;
  top: 0;
  left:0;
}
.sort-tab{
  width:100%;
  height: 2rem;
  line-height: 2rem;
  overflow-x:scroll;
  border-top:1px solid $gray;
  border-bottom:1px solid $gray;
  &::-webkit-scrollbar{
    //background-color:transparent;
    width:0;
    height:0;
  }
  ul{
    width:98px*7;
    overflow: hidden;
  }
  li{
    float:left;
    padding:0 15px;
    font-size: .6rem;
    color:$darkGray;
    font-weight: bold;
  }
  .active{
    color:$wordColor;
  }
}
.show-way{
  width:100%;
  border-bottom:1px solid $gray;
  @include flex(center,center);
  div{
    @include flex(center,center);
    flex:1;
    border-right:1px solid $gray;
    box-sizing: border-box;
    height: 2rem;
  }
  div:nth-last-child(1){
    border-right:none;
  }
  .range-way,
  .rank-way,
  .row-way,
  .block-way{
    width:1rem;
    height:1rem;
  }
  .black{
    display: none;
  }
  .active{
    border-bottom:2px solid $blue;
    .gray{display: none;}
    .black{display: block;}
  }
}
.sort-tab-con{
  div{
    position:relative;
    .event-icon{
      position:absolute;
      left:20px;
      bottom:20px;
      width: 1.5rem;
      height: 0.7rem;
    }
  }
}
.row-way-con{
  div{
    padding:20px 0;
    border-bottom:1px solid $gray;
  }
  .pro-title{
    font-size: .6rem;
    text-align: center;
    font-weight: bold;
    width: 60%;
    margin: 0 auto;
  }
  .pro-img{
    width: 14rem;
    height: 16.5rem;
    display: block;
    margin: 0 auto;
  }
  .pro-price{
    text-align: center;
    font-size: .7rem;
    font-weight: bold;
  }
}
.block-way-con{
  div{
    float:left;
    width:50%;
    padding:20px 10px;
    box-sizing: border-box;
    border-bottom:1px solid $gray;
  }
  div:nth-child(odd){
    border-right:1px solid $gray;
  }
  div:nth-last-child(1),
  div:nth-last-child(2){
    border-bottom:none;
  }
  .pro-title{
    font-size: .6rem;
    text-align: center;
    font-weight: bold;
  }
  .pro-img{
    width: 100%;
    height: 7rem;
    display: block;
    margin: 0 auto;
  }
  .pro-price{
    text-align: center;
    font-size: .7rem;
    font-weight: bold;
  }
}

//******************  products list   ******************


//******************  product******************
.product-con{
  border-top:1px solid $gray;
}
.product-info{
  padding:15px;
  .event-icon{
    width: 1.5rem;
    height: 0.7rem;
    vertical-align: middle;
  }
  del{
    color:$darkGray;
    margin-left:15px;
  }
}
.pi-title,
.pi-price{
  font-size: .6rem;
  font-weight: bold;
  text-align: center;
}
.pi-brand{
  color:$darkGray;
  font-size:.5rem;
  text-align:center;
}
.price{
  position:relative;
  .sale-action{
    position:absolute;
    left:10px;
    top:3px;
  }
}
.product-banner{
  width:100%;
  height: 19rem;
  .swiper-pagination-bullet {
    background: $wordColor;
  }
}
.product-banner img{
  width:100%;
  height:100%;
}
.product-info-filter{
  border-top:1px solid $gray;
  border-bottom:1px solid $gray;
  padding:20px 0;
}
.product-size{
  text-align: center;
  span{
    border:1px solid $darkGray;
    border-radius: 5px;
    display: inline-block;
    width:1.6rem;
    height:1.6rem;
    text-align: center;
    line-height: 1.6rem;
    margin:0 5px;
  }
  .active{
    border-color:$blue;
    border-width: 2px;
  }
}
.product-color{
  text-align: center;
  span{
    width:1.8rem;
    height:1.8rem;
    border-radius: 50%;
    display: inline-block;
    margin:0 5px;
    color:$white;
  }
  .color-white{
    background-color:$white;
    border:1px solid $darkGray;
  }
  .color-blue{
    background-color: $blue;
  }
  .color-yellow{
    background-color: #ffcb3c;
  }
  .color-black{
    background-color: #000;
  }
  span:before{
    content:'\2714';
    font-size:1rem;
    color:#fff;
    visibility: hidden;
  }
  .color-white:before{
    color:$wordColor
  }
  .active:before{
    visibility: visible;
  }
}
.product-action{
  padding:20px 15px;
}
.product-num{
  float:left;
  margin-bottom: 20px;
  .plus{
    width:1.8rem;
    height:1.8rem;
    line-height: 1.7rem;
    float:left;
    border:2px solid $gray;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
    border-right:none;
    text-align: center;
    font-size: 0.6rem;
  }
  .minus{
    width:1.8rem;
    height:1.8rem;
    line-height: 1.7rem;
    float:left;
    border:2px solid $gray;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box;
    border-left:none;
    text-align: center;
    font-size: 0.6rem;
  }
  .num-div{
    width:3rem;
    border-radius: inherit;
    float:left;
    text-align: center;
    padding-left:0;
    height: 1.8rem;
    line-height: 1.8rem;
    box-sizing: border-box;
    border:2px solid $gray;
  }
}
.add-cart{
  width:50%;
  float:right;
}
.product-hits{
  width: 100%;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: 0.6rem;
  border-radius: 30px;
  border:2px solid $gray;
  box-sizing: border-box;
  margin-top:20px;
  overflow: hidden;
  .stars{
    float:left;
    margin: 12px 10px 0 15px;
  }
}
.hits{
  float:left;
  border-right:2px solid $gray;
  width:65%;
}
.stars img{
  width:.8rem;
  height:.8rem;
}
.hits-total{
  float:left;
  color:$darkGray;
  margin-right:10px;
}
.share{
  width:34%;
  float:left;
  img{
    width:.8rem;
    height:.8rem;
    margin:14px 14px 0 14px;
  }
}
.product-details-tab{
  @include flex(center,center);
  height:1.8rem;
  line-height: 1.8rem;
  border-bottom:1px solid $gray;
  span{
    flex:1;
    @include flex(center,center);
    color:$darkGray;
    font-weight: bold;
    font-size:.5rem;
  }
  .active{
    color:$wordColor;
  }
}
.product-details-tab-con{
  display: none;
  margin-bottom:20px;
  min-height:400px;
}
.product-features{
  td{
    border:1px solid $gray;
  }
  tr td:nth-child(1){
    color:$darkGray;
  }
}
.product-product,
.product-brand{
  padding:15px;
  font-size:.6rem;
  text-align: justify;
}
.product-reviews{
  li{
    padding:15px;
    border-bottom:1px solid $gray;
  }
  li:nth-last-child(1){
    border-bottom:none;
  }
}
.comment-info{
  span{
    float:left;
    color:#434343;
    font-weight: bold;
  }
  .stars{
    margin-top: 5px;
    float:right;
    img{
      width: .6rem;
      height: .6rem;
    }
  }
}
.comment-date{
  color:$darkGray;
  margin: 10px 0;
}
.product-footer,
.confirm-footer{
  border-top:1px solid $gray;
  width:100%;
  background-color: $white;
  position: absolute;
  height: 2.2rem;
  box-sizing: border-box;
  bottom: 0;
  @include flex(center,center);
}
.favorite{
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: $white;
  border:2px solid $gray;
  @include flex(center,center);
  float:left;
  img{
    width: 0.8rem;
    height: 0.8rem;
  }
}
.review-input{
  width:70%;
  float:left;
  margin:0 11px;
}
.send-comment{
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: $blue;
  border:2px solid $blue;
  @include flex(center,center);
  float:left;
  img{
    width: 0.8rem;
    height: 0.8rem;
  }
}
//******************  product ******************

//******************  cart ******************

.icon-dot{
  display: block;
  width: 1rem;
  height: .3rem;
  background:url(../img/dot.png) no-repeat;
  background-size:100% 100%;
  margin-right:15px;
}
.cart-area{
  padding:12px 0;
  border-bottom:1px solid $gray;
  position:relative;
  height: 3.5rem;
}
.cart-area:nth-child(1){
  border-top:1px solid $gray;
}
.cart-product{
  padding:0 12px;
  @include flex(center,center);
  width:100%;
  box-sizing: border-box;
  position:relative;
  float:left;
}
.cart-product-pic{
  width:3rem;
  height:3rem;
  margin-right: 5px;
}
.cart-product-info{
  width:60%;
}
.cart-product-name{
  color:$black;
  font-size: .6rem;
}
.cart-product-size{
  color:$darkGray;
  font-size: .4rem;
}
.cart-product-price{
  color:$black;
  font-weight:bold;
  margin:0 8px;
}
.cart-product-num{
  .cart-num-input{
    width:1.8rem;
    height:1.2rem;
    line-height: 1.2rem;
    padding-left:0;
    text-align: center;
    border:1px solid $gray!important;
    margin:0;
    border-radius: inherit;
    border-top:none!important;
    border-bottom:none!important;
    box-sizing: border-box;
  }
  .plus{
    width:1.8rem;
    border:1px solid $gray;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.6rem;
  }
  .minus{
    width:1.8rem;
    border:1px solid $gray;
    border-top:none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.6rem;
  }
}
.left-action{
  height: 100%;
  position:absolute;
  right:100%;
  top:0;
  @include flex(center,center);
}
.right-action{
  height: 100%;
  position:absolute;
  left:100%;
  top:0;
  @include flex(center,center);
}
.mark-favorite{
  @include flex(center,center);
  width:2rem;
  height:2rem;
  border-radius: 50%;
  background-color: $red2;
  margin:0 8px;
  img{
    width:.8rem;
    height:.8rem;
  }
}
.mark-del{
  @include flex(center,center);
  width:2rem;
  height:2rem;
  border-radius: 50%;
  background-color: $darkGray;
  margin:0 8px;
  img{
    width:.8rem;
    height:.8rem;
  }
}
.mark-edit{
  @include flex(center,center);
  width:2rem;
  height:2rem;
  border-radius: 50%;
  background-color: $blue;
  margin:0 8px;
  img{
    width:.8rem;
    height:.8rem;
  }
}
.cart-footer{
  width:100%;
  padding: 15px 20px;
  background-color: $white;
  position: absolute;
  height: 8rem;
  box-sizing: border-box;
  bottom: 0;
  border-top:1px solid $gray;
  .btn{
    display: block;
    margin-bottom:15px;
  }
  .btn:nth-last-child(1){
    margin-bottom:0;
    background-color:inherit;
  }
}
.subtotal{
  padding:12px 0;
  font-size:.6rem;
  p{
    float:right;
    font-size:.7rem;
    font-weight: bold;
  }
}
//******************  cart ******************



//******************  delivery ******************

.icon-back{
  display: block;
  width: .5rem;
  height: .9rem;
  background: url(../img/back.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.delivery-header div:nth-child(1),
.payment-header div:nth-child(1),
.confirm-header div:nth-child(1){
  position: absolute;
  top:50%;
  margin-top:-.45rem;
}
.delivery-header .head-title,
.payment-header .head-title,
.confirm-header .head-title{
  width:100%;
}
.delivery-con,
.payment-con{
  padding:15px;
}
.step-img{
  margin-bottom:20px;
}
.step-img img{
  width: 100%;
  height: auto;
}
.delivery-tab{
  margin-bottom:20px;
  border:2px solid $gray;
  width:100%;
  height:2rem;
  border-radius: 30px;
  padding:4px;
  box-sizing: border-box;
  @include flex(center,center);
  .active{
    background-color:$blue;
    color:$white;
  }
}
.delivery-tab span{
  width:50%;
  height:100%;
  line-height: 1.4rem;
  display: block;
  border-radius: 30px;
  box-sizing: border-box;
  font-size:.7rem;
  text-align: center;
}
.delivery-con .btn{
  margin-bottom:15px;
}

//******************  delivery ******************


//******************  payment ******************

.payment-sort{
  width: 100%;
  left: 0;
  margin-top: 20px;
  div{
    border:1px solid $gray;
    border-radius: 5px;
    width:32%;
    height: 3.5rem;
    float:left;
    box-sizing: border-box;
    @include flex(center,center);
  }
  div:nth-child(2){
    margin: 0 2%;
  }
  .active{
    height: 5rem;
    background-color: #EAEAEA;
    margin-top: -.8rem!important;
  }
  .card1{
    width: 3rem;
    height: auto;
  }
  .card2{
    width: 3.6rem;
    height: auto;
  }
  .card3{
    width: 4rem;
    height: auto;
  }
}

//******************  payment ******************


//******************  confirmation ******************

.confirm-info{
  .caption{
    width:100%;
    border-top:1px solid $gray;
    border-bottom:1px solid $gray;
    padding:15px 0;
    background-color: $lightGray;
    span:nth-child(1){
      font-size: .6rem;
      float:left;
      margin-left:15px;
      font-weight: bold;
    }
    span:nth-child(2){
      font-size: .5rem;
      color:$blue;
      float:right;
      margin-right:15px;
    }
  }
  .list{
    width:100%;
    padding-left:20px;
    box-sizing: border-box;
    li{
      border-bottom:1px solid $gray;
      padding:15px;
      div:nth-child(1){
        float:left;
        width:80%;
      }
      div:nth-child(2){
        float:right;
        font-weight: bold;
        img{
          width:2rem;
          height:auto;
        }
      }
      h5{
        font-size: .6rem;
        width:100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p{
        font-size:.5rem;
        span{
          color:$darkGray;
        }
      }
    }
    li:nth-last-child(1){
      border-bottom:none;
    }
  }
}
.confirm-con{
  .step-img{
    padding:15px;
  }
}
.confirm-footer{
}
//******************  confirmation ******************
